import { useSelector,useDispatch } from "react-redux";
import { increment,decrement,addToNum } from "./store/modules/countStore";
import { fetchChannelList }  from './store/modules/channelStore'
import { useEffect } from "react";

function App() {
  const {count}  = useSelector(state=>state.counter)
  const { channelList } =  useSelector(state=>state.channel)
  const dispatch = useDispatch()

  useEffect(()=>{
    dispatch(fetchChannelList())
  },[dispatch])

  return (
    <div className="App">
      <button onClick={()=>dispatch(decrement())}>-</button>
      {count}
      <button onClick={()=>dispatch(increment())}>+</button>
      <button onClick={()=>dispatch(addToNum(10))}>+10</button>
      <button onClick={()=>dispatch(addToNum(20))}>+20</button>
       {channelList.map(item=><li key={item.id}>{item.name}</li>)}
    </div>
  );
}

export default App;
